<template>
	<view class="index" >
		<view class="top">
			<view class="imges">
				<image src="" mode=""></image>
			</view>
		</view>
		<view class="content">
			<view class="content1">
				预约时间
			</view>
			<view class="content2">
				<text>联系电话：</text>
				<input type="text" value="" placeholder="单行输入" v-model="phone"/>
			</view>
			<view class="content3">
				人数
			</view>
			<view class="content4">
				<view class="content41" @click="subtract()">
					-
				</view>
				<view class="content42">
					{{population}}
				</view>
				<view class="content43" @click="population++">
					+
				</view>
			</view>
			<view class="content5">
				<view class="ge" v-for="(item,index) in people" @click="population=item">
					{{item}}人
				</view>
			</view>
			<view class="content6">
				预约
			</view>
		</view>
		<view class="bottom">
			<view class="bottom1">
				请仔细阅以下
			</view>
			<view class="bottom2">
				<view class="bottom21">
					预约须知
				</view>
				<view class="bottom22">
					本服务为主题咖生活服务，请悉知以下信用风险：<br/>
					一、请不要发起空头预约、如有个人原因请前往个人中心取消预约。<br/>
					二、恶意预约将对您的用户信用及至臻等级造成影响。<br/>
					三、本服务仅提供服务预约入口，如有预约上的问题，请以服务商为准。<br/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				app_height: 0,
				phone:"",
				population:0,
				people:[2,4,6,8]
			};
		},
		onLoad() {
			// const _this = this;
			// uni.getSystemInfo({
			// 	success: res => {
			// 		// console.log('手机可用高度:' + res.windowHeight * 2 + 'rpx');
			// 		_this.app_height = res.windowHeight * 2;
			// 	}
			// });
			//响应式高度
		},
		methods:{
			subtract(){
				if(this.population >= 1){
					this.population--
				}
			}
		}
	}
</script>

<style lang="scss">
	.index{
		width: 100%;
		height: 100%;
		background: #F4EEEE;
	}
	.top{
		width: 80%;
		height: 350rpx;
		margin: 0 auto;
		
		.imges{
			width: 600rpx;
			height: 306rpx;
			border: 20rpx solid #F4EEEE;
			
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.content {
		width: 690rpx;
		height: 672rpx;
		background: #FFFFFF;
		margin: 0 auto;
		display: flex;
		// justify-content: center;
		flex-direction: column;
		
		.content1 {
			font-size: 34rpx;
			font-weight: 600;
			margin: 30rpx auto;
		}
		
		.content2 {
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			
			text {
				width: 200rpx;
				height: 46rpx;
				font-size: 40rpx;
				line-height: 56rpx;
			}
			
			input {
				width: 400rpx;
				height: 62rpx;
				border: 2rpx solid #c8cccf;
				border-radius: 20rpx;
				padding-left: 20rpx;
				font-size: 28rpx;
			}
		}
		
		.content3 {
			margin: 30rpx auto;
			font-size: 34rpx;
			font-weight: 600;
		}
		
		.content4 {
			margin: 10rpx auto;
			display: flex;
			
			.content41 {
				width: 80rpx;
				height: 80rpx;
				border: 2rpx solid rgb(237, 237, 237);
				border-radius: 50%;
				text-align: center;
				line-height: 60rpx;
				font-size: 80rpx;
				color: rgb(29, 101, 227);
				margin-top: 20rpx;
				margin-right: 20rpx;
			}
			.content42 {
				width: 200rpx;
				height: 120rpx;
				border: 2rpx solid #F9F9F9;
				background: #F9F9F9;
				text-align: center;
				line-height: 120rpx;
				font-size: 48rpx;
				font-weight: 600;
				color: #1D65E3;
				margin-right: 20rpx;
			}
			.content43 {
				width: 80rpx;
				height: 80rpx;
				border: 2rpx solid rgb(237, 237, 237);
				border-radius: 50%;
				text-align: center;
				line-height: 60rpx;
				font-size: 80rpx;
				color: rgb(29, 101, 227);
				margin-top: 20rpx;
				margin-right: 20rpx;
			}
		}
		
		.content5 {
			width: 380rpx;
			height: 56rpx;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			
			.ge{
				width: 80rpx;
				height: 56rpx;
				border: 2rpx solid #EDEDED;
				text-align: center;
				line-height: 56rpx;
				border-radius: 20rpx;
			}
		}
		
		.content6 {
			width: 630rpx;
			height: 80rpx;
			background-color: #FF9800;
			margin: 20rpx auto;
			border-radius: 40rpx;
			text-align: center;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 80rpx;
		}
	}
	
	.bottom {
		width: 100%;
		margin-top: 20rpx;
		
		.bottom1 {
			width: 96%;
			margin-left: 2%;
			height: 64rpx;
			background-color: #F9F9F9;
			text-align: center;
			line-height: 64rpx;
			color: #999999;
		}
		.bottom2 {
			width: 96%;
			margin-left: 2%;
			background-color: #FFFFFF;
			margin-bottom: 20rpx;
			
			.bottom21 {
				margin-left: 25rpx;
				text-align: center;
				padding-top: 20rpx;
				padding-bottom: 30rpx;
			}
			.bottom22 {
				margin-left: 25rpx;
				color: #999999;
			}
		}
	}
</style>
